<template>
  <div 
    class="editor-text" 
    :class="{ 'title-text': props.styleType === 'title', 'hot-title': props.styleType === 'hot-title' }"
    :style="{
      color: props.styleType ? undefined : props.color,
      fontSize: props.styleType ? undefined : `${props.fontSize}px`,
      textAlign: props.styleType ? undefined : props.textAlign,
      fontWeight: props.styleType ? undefined : props.fontWeight,
      lineHeight: props.styleType ? undefined : props.lineHeight,
      padding: props.styleType ? undefined : `${props.padding}px`
    }"
  >
    {{ props.content }}
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  content: {
    type: String,
    default: '文本内容'
  },
  color: {
    type: String,
    default: '#333333'
  },
  fontSize: {
    type: Number,
    default: 16
  },
  textAlign: {
    type: String,
    default: 'left'
  },
  fontWeight: {
    type: String,
    default: 'normal'
  },
  lineHeight: {
    type: Number,
    default: 1.5
  },
  padding: {
    type: Number,
    default: 6
  },
  styleType: {
    type: String,
    default: '' // 可选值: '', 'title', 'hot-title'
  }
});

defineOptions({
  name: 'editor-text'
});
</script>

<style lang="scss" scoped>
.editor-text {
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 